<template>
  <div class="CollectiFDataFiles">
    <div class="heaader">
      <div class="left">
        <el-input v-model="input" size="small" style="width:200px;" placeholder="请输入内容"></el-input>
        <el-button type="primary" size="small">查询</el-button>
      </div>
      <div class="right">
        <my-icon backgroundColor="#e55656" icon="el-icon-delete">删除</my-icon>
        <my-icon backgroundColor="#2d8191" icon="el-icon-sell">导入</my-icon>
        <my-icon backgroundColor="#f9c81b" icon="el-icon-s-management">导出</my-icon>
      </div>
    </div>
    <div class="content" :key="key">
      <my-tabs :textList="textList" :currentVal="currentVal" @callback="callback"></my-tabs>
      <div class="contentBox">
        <div class="eltabel" v-if="currentVal === 0">
          <el-table
            ref="multipleTable"
            border
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{ backgroundColor: '#f6f6f6', color: '#3c52b7', fontWeight: 'bold' }"
          >
            >
            <el-table-column align="center" label="全选" type="selection" width="55"> </el-table-column>
            <el-table-column align="center" prop="fileName" label="文件名" width="120"> </el-table-column>
            <el-table-column align="center" prop="demodulationParameters" label="解调参数" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" prop="theFileSize" label="文件大小" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" prop="typeOfAntenna" label="天线类型" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" prop="nameOfReconnaissanceSystem" label="侦察系统名称" min-width="140" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" prop="equipmentCode" label="设备代码" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" prop="channelNumber" label="通道号" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" label="操作" width="170">
              <template slot-scope="{ row }">
                <div class="cell-cion">
                  <my-icon backgroundColor="#3856bd" icon="el-icon-s-management" @click.native="toView(row)">查看</my-icon>
                  <my-icon backgroundColor="#3fa8f2" icon="el-icon-edit" @click.native="editor(row)">编辑</my-icon>
                  <my-icon backgroundColor="#72b969" icon="el-icon-plus" @click.native="add(row)">新增</my-icon>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </div>
        <div class="entry" v-if="currentVal === 1">
          <div class="baseData">
            <p>基本信息</p>
            <el-form ref="form" :model="form" :inline="true" size="small" label-width="100px">
              <el-form-item label="名称:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="解调参数:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="文件大小:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="天线类型:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="侦察系统名称:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="设备代码:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="通信号:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
            <div class="interval"></div>
          </div>
          <div class="baseData" style="border-top:none">
            <p>编目信息</p>
            <el-form ref="form" :model="form" :inline="true" size="small" label-width="100px">
              <el-form-item label="名称:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="解调参数:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="文件大小:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="天线类型:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="侦察系统名称:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="设备代码:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="通信号:">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
            <div class="interval intervalSty">
              <div>
                <el-button type="success" size="mini" icon="el-icon-download">下 载</el-button>
              </div>
              <div>
                <el-button type="danger" size="mini">删 除</el-button>
                <el-button type="info" size="mini">取 消</el-button>
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentVal === 2" class="echart" ref="main"></div>
      </div>
    </div>
  </div>
</template>

<script>
import myIcon from '@/components/Icon';
import echarts from 'echarts';
import myTabs from '@/components/Tabs';

export default {
  name: 'CollectiFDataFiles',
  components: {
    myIcon,
    myTabs
  },
  data() {
    return {
      input: '',
      key: 0,
      textList: ['还原后信息素材文件列表', '还原后信息素材文件详情', '还原后信息素材文件统计'],
      currentVal: 0,

      tableData: [
        {
          fileName: 'XX设备数据',
          demodulationParameters: '默认值',
          theFileSize: 6556156,
          typeOfAntenna: '全向',
          nameOfReconnaissanceSystem: 'WS航空检测',
          equipmentCode: 'SW-1565',
          channelNumber: 'D-565'
        },
        {
          fileName: 'XX设备数据',
          demodulationParameters: '默认值',
          theFileSize: 6556156,
          typeOfAntenna: '全向',
          nameOfReconnaissanceSystem: 'WS航空检测',
          equipmentCode: 'SW-1565',
          channelNumber: 'D-565'
        },
        {
          fileName: 'XX设备数据',
          demodulationParameters: '默认值',
          theFileSize: 6556156,
          typeOfAntenna: '全向',
          nameOfReconnaissanceSystem: 'WS航空检测',
          equipmentCode: 'SW-1565',
          channelNumber: 'D-565'
        },
        {
          fileName: 'XX设备数据',
          demodulationParameters: '默认值',
          theFileSize: 6556156,
          typeOfAntenna: '全向',
          nameOfReconnaissanceSystem: 'WS航空检测',
          equipmentCode: 'SW-1565',
          channelNumber: 'D-565'
        },
        {
          fileName: 'XX设备数据',
          demodulationParameters: '默认值',
          theFileSize: 6556156,
          typeOfAntenna: '全向',
          nameOfReconnaissanceSystem: 'WS航空检测',
          equipmentCode: 'SW-1565',
          channelNumber: 'D-565'
        },
        {
          fileName: 'XX设备数据',
          demodulationParameters: '默认值',
          theFileSize: 6556156,
          typeOfAntenna: '全向',
          nameOfReconnaissanceSystem: 'WS航空检测',
          equipmentCode: 'SW-1565',
          channelNumber: 'D-565'
        },
        {
          fileName: 'XX设备数据',
          demodulationParameters: '默认值',
          theFileSize: 6556156,
          typeOfAntenna: '全向',
          nameOfReconnaissanceSystem: 'WS航空检测',
          equipmentCode: 'SW-1565',
          channelNumber: 'D-565'
        }
      ],
      multipleSelection: [],
      currentPage: 1,

      form: {
        name: ''
      },

      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [52, 75, 85, 90, 30, 20, 18, 35, 48, 54, 69, 70]
          }
        ]
      }
    };
  },
  methods: {
    // 点击tabs切换
    callback(key) {
      this.currentVal = key;
      this.key++;
      if (key === 2) {
        this.$nextTick(() => {
          this.initEchart();
        });
      }
    },
    // 多选方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 当前页·
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 图表初始化
    initEchart() {
      let chartDom = this.$refs.main;
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.option);
    },
    // 查看方法
    toView(item) {
      console.log(item);
    },
    // 编辑
    editor(item) {
      console.log(item);
    },
    // 新增
    add(item) {
      console.log(item);
    }
  }
};
</script>

<style lang="scss" scoped>
.CollectiFDataFiles {
  .heaader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      .el-button {
        margin-left: 10px;
      }
    }
    .right {
      display: flex;
      margin-right: 20px;
      > .my-icon {
        margin: 0 8px;
      }
    }
  }
  .content {
    margin-top: 15px;
    background-color: white;
    border: 1px solid #80808073;

    .contentBox {
      padding: 20px;
      .cell-cion {
        display: flex;
        justify-content: space-around;
        /deep/ .my-icon p {
          margin-top: 0 !important;
        }
      }
    }
    .footer {
      padding: 10px 15px;
      display: flex;
      flex-direction: row-reverse;
    }

    .baseData {
      background-color: #f8f8f8;
      border: 1px solid #80808073;
      > p {
        background-color: #eeeeee;
        color: #3b54c0;
        padding: 10px 15px;
        font-size: 14px;
        font-weight: bold;
      }
      > .el-form {
        margin-top: 20px;
      }
      .interval {
        border-top: 1px solid #80808073;
        padding: 15px;
      }
      .intervalSty {
        height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        > div {
          display: flex;
          flex-direction: row-reverse;
          .el-button {
            margin-left: 15px;
          }
        }
      }
    }

    .echart {
      height: 400px;
      width: 660px;
    }
  }
}
</style>
<style lang="scss">
body .el-table th.gutter {
  display: table-cell !important;
}
</style>
